// 使用BufferGeometry创建几何体，三角形和四边形；(通过顶点生成面)
// 四边形为两个三角形形成，需要六个顶点，存在重合顶点可使用索引属性实现只需四个顶点
// 通过顶点分组为不同面设置不同材质
import { useEffect } from 'react';

import './App.css';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
function App() {
  useEffect(() => {
    // 1、创建场景
    const sence = new THREE.Scene();

    //2、创建相机
    const camera = new THREE.PerspectiveCamera(
      45,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );

    //3、创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 4、创建几何体
    const geometry = new THREE.BufferGeometry(); //-----使用BufferGeometry创建一个几何体
    //###三角形
    // const vertices = new Float32Array([
    //   // --------创建顶点数据，每三个为一个顶点，逆时针为正面
    //   -1.0, -1.0, 0.0, 1.0, 1.0, 0.0, 1.0, -1.0, 0.0,
    // ]);

    //###四边形，为两个三角形，中间顶点重合，可使用索引
    const vertices = new Float32Array([
      -1.0, -1.0, 0.0, 1.0, -1.0, 0.0, 1.0, 1.0, 0.0, -1.0, 1.0, 0.0,
    ]);
    geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3)); // ---为几何体绑定顶点属性
    const indices = new Uint16Array([0, 1, 2, 2, 3, 0]); // 创建索引,0代表第一个顶点
    geometry.setIndex(new THREE.BufferAttribute(indices, 1)); // 创建索引属性,使用索引，此时几何体的顶点只有4个

    // 不同面采用不同材质
    // #1、设置两个顶点组，形成两个材质
    geometry.addGroup(0, 3, 0); // 第一个顶点开始的三个顶点为一个面，采用材质组的第一个材质
    geometry.addGroup(3, 3, 1);

    //#2、设置两个材质
    const material1 = new THREE.MeshBasicMaterial({
      color: 0x00ff00,
      // side: THREE.DoubleSide, // 坐标轴正反面均可显示
      wireframe: true,
    });
    const material2 = new THREE.MeshBasicMaterial({
      color: 0xff0000,
    });

    //#3、创建网格绑定几何体和材质组
    const plane = new THREE.Mesh(geometry, [material1, material2]);
    console.log(geometry);

    // 5、将网格添加到场景
    sence.add(plane);

    // 6、设置相机位置
    camera.position.z = 5;
    camera.position.x = 3;
    camera.position.y = 2;
    camera.lookAt(0, 0, 0);

    // 添加世界坐标辅助器与轨道控制器
    const axesHelper = new THREE.AxesHelper(5);
    sence.add(axesHelper);
    const controls = new OrbitControls(camera, renderer.domElement);
    // controls.autoRotate = true;
    controls.dampingFactor = 0.5;
    //7、渲染
    function animate() {
      controls.update();
      requestAnimationFrame(animate);
      // cube.rotation.x += 0.01;
      // cube.rotation.y += 0.01;
      renderer.render(sence, camera);
    }
    animate();
    // 画布自适应
    window.addEventListener('resize', () => {
      renderer.setSize(window.innerWidth, window.innerHeight);
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
    });
  }, []);

  return <div></div>;
}

export default App;
